<template>
  <a-spin :spinning="loading">
    <div v-if="selfPageInfo!=null">
      <div style="padding: 5px;box-sizing: border-box;text-align: center">
        <h1>{{ selfPageInfo.name }}</h1>
      </div>
      <div class="self-page-info-details" style="box-sizing: border-box;background-color: #eeeeee;text-align: center"
           v-if="selfPageInfo.details!=null&&selfPageInfo.details.length>0">
        {{ selfPageInfo.details }}
      </div>
      <div class="self-page-info-info-outer" style="padding: 5px;box-sizing: border-box;">
        <div v-html="selfPageInfo.info"></div>
      </div>
    </div>
  </a-spin>

</template>

<script lang="ts">
import {defineComponent, ref, reactive, computed, watch, onMounted} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import {searchSelfDefinePage} from "../../api/SelfDefinePageRequest";

export default defineComponent({
  setup(props, context) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const id = ref(route.params.id);
    const loading = ref(false);
    const selfPageInfo = ref(null);
    onMounted(() => {
      if (id.value == null) {
        router.push('/')
      }
      loading.value = true
      searchSelfDefinePage(id.value).then((res) => {
        if (res.data.result == null) {
          router.push('/')
        }
        selfPageInfo.value = res.data.result;
      }).catch(() => {
        router.push('/')
      }).finally(() => {
        loading.value = false
      })
    })

    return {
      loading,
      selfPageInfo
    }
  }
})
</script>

<style scoped lang="less">
.self-page-info-details {
  border-radius: 0.8em;
  padding: 20px 5px;
  margin: 0 100px;
  @media screen and ( max-width: 992px ) {
    padding: 10px 5px;
    margin: 0 50px;
  }

  @media screen and (max-width: 768px) {
    padding: 5px 5px;
    margin: 0 20px;
    font-size: 14px;
  }
  @media screen and (max-width: 650px) {
    padding: 10px 5px;
    margin: 0 10px;
    font-size: 13px;
  }
}
</style>
<style>
.self-page-info-info-outer img{
  object-fit: scale-down!important;
  max-width: 100%;
  height: auto;
}
</style>
